<!--
 * @Author: yuanweijiang
 * @Date: 2024-11-13 14:34:23
 * @LastEditors: XHM
-->
<template>
	<el-dialog class="content" width="550" v-model="state.visible" :close-on-click-modal="false" draggable>
		<template #header>
			<span class="el-dialog__title">{{ state.title }}</span>
			<i @click="handleClose" style="position: absolute; cursor: pointer; right: 16px; top: 16px" class="iconfont icon-guanbi-1"></i>
		</template>
		<el-form
			:inline="true"
			label-width="100"
			class="w-full"
			:model="state.queryForm"
			:disabled="!state.flag"
			ref="queryRef"
			style="text-align: left"
			:rules="ruleList"
		>
			<el-form-item v-if="state.flag">
				<div class="w-full flex items-center justify-evenly">
					<img
						class="imgBg cursor-pointer"
						@click="handleChoose(item)"
						:class="state.queryForm.dbType == item.id ? 'imgLight' : ''"
						:src="item.icon"
						v-for="item in imgList"
						:key="item.icon"
						alt=""
					/>
				</div>
			</el-form-item>
			<el-form-item v-else prop="dbType" label="数据源类型">
				<el-input placeholder="请输入数据源类型" clearable v-model="state.queryForm.dbType" />
			</el-form-item>
			<el-form-item prop="name" label="数据源名称" required>
				<el-input placeholder="请输入名称" clearable v-model="state.queryForm.name" />
			</el-form-item>
			<el-form-item prop="description" label="数据源说明" required>
				<el-input placeholder="请输入数据源说明" clearable v-model="state.queryForm.description" />
			</el-form-item>
			<el-form-item prop="host" label="地址" required>
				<el-input placeholder="请输入地址" clearable v-model="state.queryForm.host" />
			</el-form-item>
			<el-form-item prop="port" label="端口" required>
				<el-input-number placeholder="请输入端口" v-model="state.queryForm.port" min="1" max="65535" />
			</el-form-item>
			<el-form-item prop="databaseName" label="数据库名称" required>
				<el-input placeholder="请输入数据库名称" v-model="state.queryForm.databaseName" />
			</el-form-item>
			<el-form-item prop="username" label="用户名" required>
				<el-input placeholder="请输入用户名" v-model="state.queryForm.username" />
			</el-form-item>
			<el-form-item prop="password" label="密码" required>
				<el-input placeholder="请输入密码" type="password" v-model="state.queryForm.password" />
			</el-form-item>
			<el-form-item v-if="!state.flag" prop="status" label="连接状态">
				<el-switch
					v-model="state.queryForm.status"
					:active-value="1"
					:inactive-value="0"
					class="ml-2"
					style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
				/>
			</el-form-item>
		</el-form>
		<div class="flex justify-between" v-if="state.flag">
			<el-button type="primary" class="dialogTrue" :loading="btnLoading" @click="submitForm('test')">测试连接</el-button>
			<el-button type="primary" class="dialogTrue" @click="submitForm()">保存</el-button>
		</div>
		<div class="flex justify-end" v-else>
			<el-button type="primary" class="dialogTrue" @click="handleClose">确认</el-button>
		</div>
	</el-dialog>
</template>
<script lang="ts" name="addrule" setup>
import { useMessage } from '/@/hooks/message';
import { useDict } from '/@/hooks/dict';
import { addOrUpdateDataSource, testConnection } from '/@/api/datasource';
import { ElNotification } from 'element-plus';
import icon1 from '/@/assets/myspl.png';
import icon2 from '/@/assets/hive.png';
import icon3 from '/@/assets/oracle.png';
import icon4 from '/@/assets/postgre.png';
const state = reactive({
	visible: false,
	title: '上传APP版本',
	queryForm: {},
});
const { systemState, systemList } = useDict('systemState', 'systemList');
const imgData = ref({
	moduleType: 2,
});
const btnLoading = ref(false);
const imgList = ref([
	{
		icon: icon1,
		id: 'mysql',
	},
	// {
	// 	icon: icon2,
	// 	id: 'hive',
	// },
	// {
	// 	icon: icon3,
	// 	id: 'oracle',
	// },
	{
		icon: icon4,
		id: 'postgresql',
	},
]);
const IconDropDown = {
	render: () => {
		return h('img', { src: DropDown });
	},
};
const emit = defineEmits(['refresh']);
const ruleList = reactive({
	name: [{ required: true, message: '数据源名称不能为空', trigger: 'blur' }],
	description: [{ required: true, message: '数据源说明不能为空', trigger: 'blur' }],
	host: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
	port: [{ required: true, message: '端口不能为空', trigger: 'blur' }],
	databaseName: [{ required: true, message: '数据库名称不能为空', trigger: 'blur' }],
	username: [{ required: true, message: '用户名不能为空', trigger: 'blur' }],
	password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
});
const queryRef = ref();
const openDialog = (val: any) => {
	const {
		visible = true,
		queryForm = {
			dbType: 'mysql',
		},
		title = '创建数据源',
		flag = true,
	} = val;
	Object.assign(state, { visible, queryForm, title, flag });
};
function handleChoose(item) {
	state.queryForm.dbType = item.id;
}
const headers = computed(() => {
	return {
		Accept: 'application/json',
		Authorization: `Bearer ${localStorage.getItem('token')}`,
	};
});

const handleClose = () => {
	state.visible = false;
	state.queryForm = {};
	queryRef.value.resetFields();
};
const submitForm = async (value) => {
	const valid = await queryRef.value.validate().catch(() => {});
	if (!valid) return false;
	
	delete state.queryForm.createTime
	if (value === 'test') {
		btnLoading.value = true;
		try {
			await testConnection(state.queryForm);
			useMessage().success('数据源连接测成功');
		} catch (error) {
			useMessage().error('数据源连接测试失败');
		}
		btnLoading.value = false;
		return;
	}
	try {
		await addOrUpdateDataSource(state.queryForm);
		useMessage().success('保存成功');
		state.visible = false;
		emit('refresh');
	} catch (error) {}
};
//上传成功
const uploadSuccess = (val) => {
	ElNotification({
		title: '温馨提示',
		message: '上传成功',
		type: 'success',
	});
	state.queryForm.installationPackageUrl = val.data;
};
defineExpose({ openDialog });
</script>
<style lang="scss" scoped>
.el-form-item {
	gap: 10px;
	width: 100%;
}

.uploadImg-box {
	font-size: 12px;
	color: rgba(49, 86, 165, 0.6);
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 20px;
	height: 78px;
	position: absolute;
	top: 12px;
}
.imgBg {
	width: 102px;
	height: 64px;
	border: 1px solid #b4caea;
}
.imgLight {
	border: 2px solid #0066ff;
}
</style>
